<template>
    <div>
        <el-card class="box-card" v-show="!showRoleMenuPag && !showRolePermissionPag" shadow="hover">
            <div slot="header" class="clearfix">
                <div>
                    <el-input placeholder="按角色名称搜索" suffix-icon="el-icon-search" v-model="searchContent"
                        @keyup.enter.native="init(pageSize, 1, searchContent)">
                    </el-input>
                </div>
                <div>
                    <el-button type="primary" @click="insert">新增</el-button>
                    <el-button type="danger" @click="del">删除</el-button>
                    <el-button type="success" @click="back">恢复</el-button>
                </div>
            </div>
            <div class="text item">
                <el-table :data="roleList" border style="width: 100%;" ref="multipleTable"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="id" label="ID" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="角色名称" width="150">
                    </el-table-column>
                    <el-table-column prop="roleValue" label="角色值">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180">
                    </el-table-column>
                    <el-table-column prop="updateTime" label="更新时间" width="180">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="80">
                        <template slot-scope="scope">
                            <el-tag type="success" v-show="scope.row.status == 1">正常</el-tag>
                            <el-tag type="danger" v-show="scope.row.status == 2">禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                            <el-button type="text" size="small" @click="showRolePermission(scope.row.id)">分配权限</el-button>
                            <el-button type="text" size="small" @click="showRoleMenu(scope.row.id)">分配菜单</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="totalPage" :page-size="pageSize"
                    @current-change="currentChange">
                </el-pagination>
            </div>
        </el-card>
        <ShareRoleMenu v-show="showRoleMenuPag" ref="childRoleMenu" @changeShowRoleMenu="changeShowRoleMenu">
        </ShareRoleMenu>
        <ShareRolePermission v-show="showRolePermissionPag" ref="childRolePermission"
            @changeShowRolePermission="changeShowRolePermission"></ShareRolePermission>
        <el-dialog title="编辑角色" :visible.sync="editDialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="form" :model="editRoleItem" label-width="80px">
                <el-form-item label="角色名称">
                    <el-input v-model="editRoleItem.name"></el-input>
                </el-form-item>
                <el-form-item label="角色值">
                    <el-input v-model="editRoleItem.roleValue"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">保 存</el-button>
            </span>
        </el-dialog>
        <el-dialog title="新增角色" :visible.sync="insertDialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="form" :model="editRoleItem" label-width="80px">
                <el-form-item label="角色名称">
                    <el-input v-model="editRoleItem.name"></el-input>
                </el-form-item>
                <el-form-item label="角色值">
                    <el-input v-model="editRoleItem.roleValue"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="insertDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitInsert">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import ShareRoleMenu from './role-menu'
import ShareRolePermission from './role-permission'

export default {
    name: "RolePermission",
    components: {
        ShareRoleMenu,
        ShareRolePermission
    },
    data() {
        return {
            // 是否加载
            loading: false,
            // 搜索内容
            searchContent: "",
            // 多选数据
            multipleSelection: [],
            // 当前页数
            currentPag: 1,
            // 每页大小
            pageSize: 10,
            // 总页数
            totalPage: 0,
            // 是否展示分配菜单
            showRoleMenuPag: false,
            // 是否展示分配权限
            showRolePermissionPag: false,
            // 编辑的角色信息
            editRoleItem: {},
            // 是否展示编辑信息
            editDialogVisible: false,
            // 是否展示新增信息
            insertDialogVisible: false
        }
    },
    mounted() {
        this.init(this.pageSize, this.currentPag, this.searchContent)
    },
    methods: {
        async init(pageSize, currentPag, searchContent) {
            let res = await this.$store.dispatch("getRolePag", {
                pageSize: pageSize,
                currentPag: currentPag,
                content: searchContent
            })
            if (!res.success) this.$message.fail(res.message)
            else {
                this.totalPage = parseInt(res.data.totalPag)
                this.currentPag = parseInt(res.data.currentPag)
                this.pageSize = parseInt(res.data.pageSize)
            }
        },
        // 多选
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        // 展示分配菜单
        showRoleMenu(id) {
            this.$refs.childRoleMenu.showRoleMenu(id);
        },
        // 展示分配权限
        showRolePermission(id) {
            this.$refs.childRolePermission.showRolePermission(id);
        },
        // 改变是否展示分配资源
        changeShowRoleMenu(data) {
            this.showRoleMenuPag = data
        },
        // 更换页数
        currentChange(pag) {
            this.getLoginLogDate(this.pageSize, pag, this.searchContent)
        },
        // 改变是否展示分配权限
        changeShowRolePermission(data) {
            this.showRolePermissionPag = data
        },
        edit(item) {
            this.editRoleItem = item
            this.editDialogVisible = true
        },
        // 保存编辑
        async save() {
            let res = await this.$store.dispatch('updateRole', this.editRoleItem)
            if (res.success) {
                this.$message.success(res.message)
                this.init()
            }
            else this.$global.resError(res)
        },
        handleClose(done) {
            done()
            setTimeout(() => {
                this.editRoleItem = {}
            }, 300)
        },
        async insert() {
            this.editRoleItem = {}
            this.insertDialogVisible = true
        },
        // 确认新增
        async submitInsert(){
            let res = await this.$store.dispatch('insertRole', this.editRoleItem)
            if (res.success) {
                this.$message.success(res.message)
                this.init()
            }
            else this.$global.resError(res)
        },
        // 批量删除
        del(){
            this.multipleSelection = this.multipleSelection.map(item => item.id)
            this.updateStatus(this.multipleSelection, 2)
        },
        // 批量恢复
        back(){
            this.multipleSelection = this.multipleSelection.map(item => item.id)
            this.updateStatus(this.multipleSelection, 1)
        },
        // 批量删除
        async updateStatus(list, status){
            let res = await this.$store.dispatch('updateRoleStatus', {
                list: list,
                status: status
            })
            if (res.success) {
                this.$message.success(res.message)
                this.init()
            }
            else this.$global.resError(res)
        },

    },
    computed: {
        roleList() {
            return this.$store.state.role.roleList
        },
    },
}
</script>

<style scoped>
.clearfix {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination {
    padding: 20px 0 10px 0;
    text-align: center;
}
</style>